<script setup>
import { useUserStore } from '@/stores/modules/user';
import { Modal } from 'ant-design-vue';

const userStore = useUserStore();
const userInfo = computed(() => userStore.userInfo || {});
const handleLogout = () => {
  Modal.confirm({
    title: '提示',
    content: '确认要注销登录吗？',
    okText: '确认',
    cancelText: '取消',
    onOk: () => {
      userStore.logout();
    },
  });
};
const handleProfile = () => {
  // 跳转到个人中心页面
};
</script>
<template>
  <a-dropdown>
    <a class="user-dropdown" @click.prevent>
      <y-icon icon="fa-solid fa-user-ninja" class="font-size-6"></y-icon>
      <span class="username">{{
        userInfo.nickname || userInfo.username || '用户'
      }}</span>
      <y-icon icon="fa-solid fa-angle-down"></y-icon>
    </a>
    <template #overlay>
      <a-menu>
        <a-menu-item key="profile" @click="handleProfile">
          <y-icon icon="fa-solid fa-user-tie"></y-icon>
          个人中心
        </a-menu-item>
        <a-menu-divider />
        <a-menu-item key="logout" @click="handleLogout">
          <y-icon icon="fa-solid fa-arrow-right-from-bracket"></y-icon>
          退出登录
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>
